<template>
  <div class="wrapper">
	  <swiper :options="swiperOptions" v-if="showSwiper">
	    <swiper-slide v-for="item of list" :key="item.id">
	    	<img class="swiper-img" :src="item.imgUrl" />
	    </swiper-slide>
	    <div class="swiper-pagination" slot="pagination"></div>
	  </swiper>
  </div>
</template>

<script>
export default {
	name: 'HomeSwiper',
	props: {
		list: Array
	},
    data () {
		return {
			swiperOptions: {
				pagination: '.swiper-pagination',
				loop: true,
				autoplay: 5000
			}
			// swiperList: [{
			// 	id: '0001',
			// 	imgUrl: 'https://imgs.qunarzz.com/vc/e3/a1/71/f498dfd3bed948d623c9093252.jpg_92.jpg'
			// }, {
			// 	id: '0002',
			// 	imgUrl: 'https://imgs.qunarzz.com/vc/44/e9/86/95bc36c9e1c06ebd68bdfe222e.jpg_92.jpg'
			// }, {
			// 	id: '0003',
			// 	imgUrl: 'https://imgs.qunarzz.com/vc/6d/9f/35/b8ad5468f73fd60ec0ced086f6.jpg_92.jpg'
			// }]
		}
	},
	computed: {
		showSwiper () {
			return this.list.length
		}
	}
}
</script>

<style lang="stylus" scoped>
	.wrapper >>> .swiper-pagination-bullet-active
		background: #fff !important
	.wrapper
		width: 100%
		height: 0
		overflow: hidden
		padding-bottom: 30%
		background: #f1f1f1
		.swiper-img
			width: 100%;
</style>
